import React, { useEffect } from 'react'
import avatar from '../../assets/back.jpg'
import { getArticle } from '@/store/actions/acticle'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'

export default function Article() {
  const dispatch = useDispatch()
  const { active } = useSelector((state: RootState) => state.channel)
  const { articles } = useSelector((state: RootState) => state.article)
  useEffect(() => {
    dispatch(getArticle(active))
  }, [dispatch, active])
  return (
    <div className="list">
      {articles.map((item: any) => {
        return (
          <div className="article_item" key={item.art_id}>
            <h3 className="van-ellipsis">{item.title}</h3>
            <div className="img_box">
              <img
                src={item.cover.images ? item.cover.images[0] : avatar}
                className="w100"
                alt=""
              />
            </div>
            <div className="info_box">
              <span>{item.pubdate}</span>
              <span>{item.comm_count}评论</span>
              <span>{item.aut_id}</span>
            </div>
          </div>
        )
      })}
    </div>
  )
}
